<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" class="app-form" inline v-show="showSearch">
      <el-form-item label="名称" prop="userId">
        <user-select v-model="queryForm.userId" placeholder="编号"/>
      </el-form-item>
      <el-form-item label="时间" prop="timeRange" class="app-form-item">
        <el-date-picker v-model="queryForm.timeRange"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled-date="disabledDateFunction"/>
      </el-form-item>
      <el-form-item class="app-form-item-right" >
        <el-button type="primary"
                   icon="Search"
                   @click="getCallRecordsList"
                   v-hasPermi="['core:callRecord:list']">查询</el-button>
        <el-button type="danger" plain icon="Refresh" @click="resetQueryForm">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table-tools mb8">
    <el-table :data="parentsData"
              border
              stripe
              row-key="id"
              @expand-change="loadingData"
              style="width: 100%">
      //内层表头数据
      <el-table-column type="expand">
        <template #default="scope">
          <el-table :data="scope.row.sonData" style="width: 100% ;margin-left:50px">
            <el-table-column align="center" prop="userName"  label="工号" width="80px"/>
            <el-table-column align="center" prop="userId" label="用户名" width="100px">
              <template #default="scope">
                <span>{{getUser(scope.row.userId)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="类型" width="120px">
              <template #default="scope">
                <el-tag>{{scope.row.type === 0?"PC":(scope.row.type===1?"Android":"Helmet")}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="joinTime" label="加入时间" width="250px"/>
            <el-table-column align="center" prop="leaveTime" label="结束时间" width="250px"/>
            <el-table-column align="center" prop="duration" label="参与时长" width="150px"/>
            <el-table-column align="center" prop="remark" label="离开备注" width="300px"/>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createBy" label="发起方">
        <template #default="scope">
          <span>{{getUser(scope.row.createBy)}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="false" align="center" prop="id" label="编号" show-overflow-tooltip="100" />
      <el-table-column align="center" prop="startTime" label="开始时间"/>
      <el-table-column align="center" prop="endTime" label="结束时间"/>
      <el-table-column align="center" prop="duration" label="会议时长"/>
      <el-table-column align="center" prop="voiceFile" label="录像文件">
        <template #default="scope">
          <el-button type="info" icon="Search" disabled plain  v-if="scope.row.fileList === null" >暂无文件</el-button>
          <el-button type="success" icon="VideoPlay" plain v-else  @click="viewRecordFile(scope.row)">点击查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operation" label="操作">
        <template #default="scope">
          <el-button
            type="danger"
            plainss
            @click="handleDelete()"
            v-hasPermi="['core:callRecord:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <pagination :total="recordTotal"
              v-model:page="queryForm.pageNum"
              v-model:limit="queryForm.pageSize"
              @pagination="getCallRecordsList"/>

  <el-dialog title="录像文件"
             v-model="recordDialogVisible"
             width="1320px"
             height="835px"
             :show-close="false"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :destroy-on-close="true">
    <el-button-group v-if="fileList.length > 1" style="margin-bottom: 10px">
      <el-button size="default" :type="currentIndex === index ? 'primary' : ''" v-for="(item, index) in fileList"
                 @click="switchRecordFile(index)">{{'录像文件' + (index + 1)}}</el-button>
    </el-button-group>
    <video id="recordVideo" :src="fileUrl" controls autoplay></video>
    <span slot="footer" class="dialog-footer">
          <el-button @click="closeRecordVideo">关 闭</el-button>
        </span>
  </el-dialog>

</template>

<script>
import dayjs from "dayjs";
import {getCallRecordsList,getRoomList} from "@/api/core/callRecords";
import {getUserByNickName} from "@/api/system/user";
export default {
  name: "index",
  data() {
    return {
      queryForm: {
        userId: '',
        timeRange: [],
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      recordTotal: 0,
      expandedFlag :0,
      parentsData: [],
      fileUrl: '',
      recordDialogVisible: false,
      fileList: [],
      currentIndex: 0,
      allUserMap:{}
    }
  },
  created() {
    this.getCallRecordsList()
    this.getUserMap()
  },
  methods: {
    getUserMap() {
      getUserByNickName().then(res => {
        console.log('32323',res);
        this.allUserMap = res.data
      })
    },
    disabledDateFunction(date) {
      const paramDate = dayjs(date)
      const currentDate = dayjs()
      currentDate.hour(23)
      currentDate.minute(59)
      currentDate.second(59)

      return paramDate.valueOf() > currentDate
    },

    handleDelete(index, row) {
      console.log(index, row);
    },
    resetQueryForm() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10
      }
      this.getCallRecordsList()
      this.getRoomList()
    },
    getCallRecordsList() {
      this.recordLoading = true
      const form = {...this.queryForm}
      if (form.timeRange && form.timeRange.length === 2) {
        form.startTime = form.timeRange[0]
        form.endTime = form.timeRange[1]
      }
      delete form.timeRange

      getCallRecordsList(form).then(res => {
        console.log('sas', res)
        const {rows, total} = res
        this.parentsData = rows
        this.recordTotal = total
        this.parentsData.forEach(item => {
          item.sonData = []
        })
      }).finally(() => {
        this.recordLoading = false
      })
    },

    async loadingData(row, expandedRows) {
      console.log(row);
      console.log(expandedRows);
      if (this.expandedFlag < expandedRows.length) {
        //当操作是展开时请求后端
        await getRoomList({roomId: row.id}).then(response => {
          // 遍历当前页面表
          this.parentsData.forEach((temp, index) => {
            // 找到当前点击的行，把动态获取到的数据赋值进去
            if (temp.id === row.id) {
              this.parentsData[index].sonData = response.data;
            }
          });
        });
      }
      this.expandedFlag = expandedRows.length;
    },
    viewRecordFile(row) {
      this.currentIndex = 0
      this.fileList = row.fileList
      this.fileUrl = row.fileList[0].fileUrl
      console.log(this.fileUrl);
      this.recordDialogVisible = true
    },
    closeRecordVideo() {
      const videoDom = document.querySelector('#recordVideo')
      videoDom.pause()
      this.fileUrl = ''
      this.fileList = []
      this.currentIndex = 0
      this.recordDialogVisible = false
    },
    switchRecordFile(index) {
      const videoDom = document.querySelector('#recordVideo')
      videoDom.pause()
      this.currentIndex = index
      this.fileUrl = this.fileList[index].fileUrl
      videoDom.play()
    },
    getUser(str){
      if(!str){
        return str
      }else{
        let arr = str.toString().split(',')
        let receiverArr = arr.map(item => this.allUserMap[item])
        return receiverArr.join(',')
      }
    },
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  padding-bottom: 0;
  flex-wrap: nowrap;
  height:55px;
  padding-top: 10px;
}
.app-form{
  display: flex;
  flex-wrap: wrap;
  margin-left: 25px;
  width: 100%;
}
.app-form-item{
  display: flex;
  flex-wrap: nowrap;
  margin-left: 35px;
  margin-right: 125px;
}
.dialog-footer{
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
